<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自动排班生成</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .form-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
        .form-title {
            color: #0d6efd;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .form-control:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        .btn-primary {
            padding: 0.5rem 1.5rem;
        }
        .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container py-5">
        <div class="form-container bg-white">
            <h2 class="form-title">排班生成器</h2>
            
            {% if error %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ error }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endif %}
            
            <form method="post" novalidate>
                {% csrf_token %}
                
                <div class="mb-4">
                    <label for="start_date" class="form-label fw-bold">开始日期</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" 
                           value="{{ start_date|default:'' }}" required>
                    <div class="error-message">
                        {% if form.start_date.errors %}{{ form.start_date.errors }}{% endif %}
                    </div>
                </div>
                
                <div class="mb-4">
                    <label for="days" class="form-label fw-bold">排班天数</label>
                    <input type="number" class="form-control" id="days" name="days" 
                           min="1" max="30" value="{{ days|default:'' }}" required>
                    <div class="error-message">
                        {% if form.days.errors %}{{ form.days.errors }}{% endif %}
                    </div>
                </div>
                
                <div class="d-grid gap-3 d-md-flex justify-content-md-center mt-5">
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-calendar-plus"></i> 生成排班表
                    </button>
                    <a href="{% url 'schedule' %}" class="btn btn-outline-secondary px-4">
                        <i class="bi bi-calendar-week"></i> 查看排班
                    </a>
                    <a href="{% url 'admin:index' %}" class="btn btn-link text-decoration-none">
                        管理后台
                    </a>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    
    <!-- 添加中文日历本地化支持 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/zh-cn.js"></script>
    <script>
        // 设置默认日期为明天并应用中文格式
        document.addEventListener('DOMContentLoaded', function() {
            // 加载中文语言包
            moment.locale('zh-cn');
            
            // 设置日期输入框的显示格式
            const dateInput = document.getElementById('start_date');
            if (!dateInput.value) {
                const tomorrow = new Date();
                tomorrow.setDate(tomorrow.getDate() + 1);
                dateInput.valueAsDate = tomorrow;
            }
            
            // 添加日期选择器提示
            dateInput.addEventListener('focus', function() {
                this.setAttribute('placeholder', '年-月-日');
            });
        });
    </script>
</body>
</html>